<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: "PingFang SC", -apple-system, sans-serif;
            background: #f8f8f8;
        }

        /* 顶部导航 */
        .cart-header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 48px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            z-index: 100;
        }

        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            color: #333;
        }

        .edit-btn {
            color: #666;
            font-size: 15px;
            position: absolute;
            right: 16px;
        }

        /* 商品容器 */
        .cart-container {
            margin: 48px 0 60px;
        }

        /* 店铺分组 */
        .store-group {
            margin: 8px 0;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
        }

        /* 店铺头部 */
        .store-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
        }

        .store-checkbox {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        .store-name {
            font-size: 14px;
            color: #333;
        }

        /* 商品项 */
        .cart-item {
            display: flex;
            padding: 12px 16px;
            position: relative;
        }

        .item-select {
            margin-right: 12px;
            display: flex;
            align-items: center;
        }

        .item-checkbox {
            width: 20px;
            height: 20px;
        }

        .item-image {
            width: 100px;
            height: 100px;
            background: #eee;
            border-radius: 4px;
            margin-right: 12px;
        }

        .item-detail {
            flex: 1;
            padding-right: 30px;
        }

        .item-title {
            font-size: 14px;
            color: #333;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-bottom: 6px;
        }

        .item-spec {
            color: #999;
            font-size: 12px;
            margin: 4px 0;
        }

        .item-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }

        .item-price {
            color: #ff5500;
            font-size: 16px;
            font-weight: bold;
        }

        .quantity-control {
            display: flex;
            align-items: center;
            border: 1px solid #eee;
            border-radius: 15px;
            padding: 4px;
        }

        .quantity-btn {
            width: 28px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            color: #666;
        }

        .quantity-num {
            min-width: 30px;
            text-align: center;
            font-size: 14px;
        }

        /* 底部工具栏 */
        .cart-footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 16px;
            box-shadow: 0 -2px 6px rgba(0,0,0,0.05);
        }

        .footer-select {
            display: flex;
            align-items: center;
            margin-right: 16px;
        }

        .total-info {
            flex: 1;
            font-size: 14px;
            color: #666;
        }

        .total-info span {
            color: #ff5500;
            margin: 0 4px;
        }

        .action-btn {
            padding: 8px 24px;
            border-radius: 18px;
            font-size: 14px;
            margin-left: 12px;
        }

        .checkout-btn {
            background: linear-gradient(90deg, #ff9500, #ff5000);
            color: #fff;
        }

        .delete-btn {
            background: #fff;
            color: #ff5500;
            border: 1px solid #ff5500;
        }

        /* 删除按钮 */
        .item-delete {
            position: absolute;
            right: 16px;
            top: 14px;
            color: #ff5500;
            font-size: 13px;
        }
    </style>
</head>
<body>
	<div id='app'>
		<!-- 顶部导航 -->
		<div class="cart-header">
		    <div class="header-title">购物车</div>
		    <div class="edit-btn">编辑</div>
		</div>
		
		<!-- 商品列表 -->
		<div class="cart-container">
		    <!-- 店铺分组1 -->
		    <div class="store-group" v-for='(item,index) in shopList' :key='index'>
		        <div class="store-header">
					<!-- 店铺选中 -->
					
		            <input @change="shopAll(index)" v-model="item.check" type="checkbox" class="store-checkbox">
		            <span class="store-name">{{item.name}}</span>
		        </div>
		
		        <!-- 商品1 -->
		        <div class="cart-item" v-for='(goods,i) in item.list' :key='index+"-"+i'>
		            <div class="item-select">
		                <input @change="goodsCheck(index,i)" v-model="goods.check" type="checkbox" class="item-checkbox">
		            </div>
		            <div class="item-image"></div>
		            <div class="item-detail">
		                <div class="item-title">{{goods.title}}</div>
		                <div class="item-spec">{{goods.des}}</div>
		                <div class="item-footer">
		                    <div class="item-price">¥{{goods.price}}</div>
		                    <div class="quantity-control">
		                        <div  @click="goods.count>1?goods.count--:''"class="quantity-btn">-</div>
		                        <div class="quantity-num">{{goods.count}}</div>
		                        <div @click="goods.count++" class="quantity-btn">+</div>
		                    </div>
		                </div>
		            </div>
		            <div @click="del(index,i)" class="item-delete">删除</div>
		        </div>
				
		    </div>
		</div>
		
		<!-- 底部工具栏 -->
		<div class="cart-footer">
		    <div class="footer-select">
		        <input @change="checkAll" v-model="check" type="checkbox">
		    </div>
		    <div class="total-info">
		        共<span>{{totalNum}}</span>件 已选<span>{{selectedNum}}</span>件 <br>
				合计：<span>¥{{totalPrice.toFixed(2)}}</span>
		    </div>
		    
		    <button @click="del(-1)" class="action-btn delete-btn">删除</button>
			<button class="action-btn checkout-btn">结算</button>
		</div>
	</div>
	<script src="js/vue.js"></script>
	<script src="js/shopCar.js"></script>
</body>
</html>
